<template>
  <!-- 好生活结佣汇总 -->
  <div class="efCommissionSummary">
    <el-form :inline="true">
      <el-form-item label="开发商：">
        <el-input v-model.trim="companyName"></el-input>
      </el-form-item>
      <el-form-item label="楼盘名称：">
        <el-input v-model.trim="devName"></el-input>
      </el-form-item>
      <el-button type="primary" @click="searchList(1)" id="monitorEnter">查询</el-button>
    </el-form>
    <table-list
      :tableData="tableData"
      :tableInfos="tableInfos"
      :tableChangeBtns="tableChangeBtns"
      :tableFormatter="tableFormatter"
      :hasSera="true"
      :showSummary="true"
      :summaryMethod="summaryMethod"
    ></table-list>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top:30px"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="totalSize"
    ></el-pagination>
  </div>
</template>

<script type="text/ecmascript-6">
import tableList from "../common/tableList";
import utils from "@/common/utils.js";
import api from "@/api/apiPath";
export default {
  name: "efCommissionSummary",
  components: {
    "table-list": tableList
  },
  data() {
    return {
      devName: "",
      companyName: "",
      tableData: [],
      tableInfos: [
        { label: "开发商", prop: "companyName" },
        { label: "楼盘名称", prop: "devName" },
        { label: "成交数量", prop: "dealNum" },
        { label: "好生活收入总额（元）", prop: "amountTotal" },
        { label: "前佣金额（元）", prop: "frontAmount" },
        { label: "后佣金额（元）", prop: "afterAmount" },
        { label: "经纪人奖励总金额（元）", prop: "awardAmountTotal" },
        { label: "渠道佣金（元）", prop: "amountBrokerTotal" },
        { label: "开发商佣金（元）", prop: "developerAmountTotal" },
        { label: "好生活佣金（元）", prop: "goodlifeAmountTotal" },
        { label: "操作", prop: "changeBtn" }
      ],
      tableChangeBtns: [{ label: "查看", type: "view", fn: this.view }],
      pageNum: 1,
      pageSize: 10, //每页几条
      totalSize: 0,
      totalRows: {}
    };
  },
  created() {
    this.searchList();
  },
  mounted() {},
  methods: {
    searchList(pageNum) {
      let param = {
        pageNum: pageNum || this.pageNum,
        pageSize: this.pageSize,
        companyName: this.companyName,
        devName: this.devName
      };
      this.axios.post(api.getSummaryHomePageList, param).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.list.list || [];
          this.totalRows = res.data.data.Total || {};
          this.totalSize = res.data.data.list.total;
        }
      });
    },
    //表格格式化方法。prop对应array下标
    tableFormatter(prop, val) {
      if (val === null) {
        return "——";
      }
      let moneyFormatter = [
        "amountTotal",
        "frontAmount",
        "afterAmount",
        "amountBrokerTotal",
        "developerAmountTotal",
        "awardAmountTotal",
        "goodlifeAmountTotal"
      ];
      if (moneyFormatter.includes(prop)) {
        return this.formatMoney(val);
      }
      return val;
    },

    handleCurrentChange() {
      this.searchList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchList(1);
    },
    view(type, idx, row) {
      this.$router.push({
        path: "/buildingTradeDetail",
        query: {
          companyName: row.companyName,
          devName: row.devName,
          projectId: row.projectId,
          devId: row.devId,

          amountTotal: row.amountTotal,
          amountBrokerTotal: row.amountBrokerTotal,
          developerAmountTotal: row.developerAmountTotal,
          goodlifeAmountTotal: row.goodlifeAmountTotal
        }
      });
    },
    formatMoney(val) {
      return val ? utils.formatMoney(val) : "0.00";
    },
    summaryMethod() {
      return this.totalRows;
    }
  },
  computed: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus"></style>
